<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>登录页面</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            font-family: "microsoft yahei";
        }

        html,
        body {
            background-image:url({{ url_for('static', filename='images/login-bg.png') }});
            background-size: 100% 100%;
            height: 100%;
        }

        .login {
            position: absolute;
            background-color: rgba(255, 255, 255, 1);
            top: 25%;
            left: 60%;
            right: 10%;
            bottom: 25%;
            border-radius: 5px;
        }

        .title,
        .u,
        .p,
        .l,
        .cnn,
        .v,
        .tips {
            position: absolute;
            width: 100%;
        }

        input.pwd,
        .uname {
            height: 35px;
            border: 0px;
            border-radius: 5px;
            width: 80%;
            padding-left: 18px;
            box-sizing: border-box;
        }

        input.da {
            height: 15px;
            border: 0px;
            width: 20%;
            padding-left: 40px;
            text-align: center;
        }

        input.da1 {
            height: 15px;
            border: 0px;
            width: 20%;
            padding-left: 40px;
            text-align: center;
        }

        input.uname {
            background: url({{ url_for('static', filename='images/login_user.png') }}) no-repeat left;
            background-color: #F2F2FA;
        }

        input.pwd {
            background: url({{ url_for('static', filename='images/login_pwd.png') }}) no-repeat left;
            background-color: #F2F2FA;
        }

        button {
            background-color: #467FE6;
            height: 35px;
            width: 80%;
            border: 0px;
            border-radius: 5px;
            color: #FFF;
            font-size: 16px;
        }

        .title {
            top: 0%;
            bottom: 80%;
            text-align: center;
            font-size: 25px;
            font-weight: bold;
            padding-top: 10px;
            box-sizing: border-box;
        }

        .u {
            top: 15%;
            bottom: 60%;
            left: 10%;
        }

        .p {
            top: 30%;
            bottom: 45%;
            left: 10%;
        }

        .l {
            top: 55%;
            bottom: 15%;
            left: 10%;
        }

        .cnn {
            top: 45%;
            bottom: 30%;
            left: 15%;
            font-size: 16px;
            color: #929090;
        }

        .v {
            top: 70%;
            bottom: 15%;
            left: 15%;
            font-size: 15px;
            color: #270404;
        }

        .tips {
            top: 80%;
            font-size: 13px;
            color: #AAAAAA;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="login">
        <div class="title">
            学生选课系统
        </div>
      <form action="http://127.0.0.1:8080/login" method="post" enctype="multipart/form-data">
        <div class="u">
            <input type="text" class="uname" name="name" />
        </div>
        <div class="p">
            <input type="text" class="pwd" name="pass" />
        </div>
        <div class="cnn">
            <input type="radio" class="da" name="user" value="common" />学生
            <input type="radio" class="da1" name="user" value="manage" /> 管理员
        </div>
        <div class="l">
            <button>登录</button>
        </div>
      </form>
        <div class="v">
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href="register" class="ab">新生注册</a>
        </div>
        <div class="tips">
            推荐使用chrome内核、Firefox浏览器访问系统
        </div>
    </div>
</body>

</html>